<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="author" content="lijinbo" />
    <title>Document</title>
  </head>
  <body>
    <p>
      相关技术使用
      <a href="https://qiankun.umijs.org/zh/api" target="_blank" rel="noopener noreferrer"> 乾坤微前端 解决方案 </a>
    </p>
    <script type="module">
      import { legacySandBox } from './jsSandBox.js'
      let { sandbox, fakeWindow } = new legacySandBox()
      var a = '主应用A'
      var c = '主应用C'

      console.log('主应用原来的Window:', a, c)
      function beforeMounted() {
        sandbox.active()
        console.log('加载子应用前')
      }
      function beforeUnMounted() {
        sandbox.inactive()
        console.log('卸载子应用前')
      }
      function app1(win = window) {
        //这里使用了fakeWindow作为window
        beforeMounted()
        if (win.a === 'app1A') {
          win.a = 'app1A-2'
          win.c = '2'
          win.d = 'app1D-2'
          console.log('子应用第二次加载Window:', win.a, win.c, win.d)
        } else {
          win.a = 'app1A' //修改
          win.c = null //删除
          win.d = 'app1D' //新增
          console.log('子应用第一次加载Window:', win.a, win.c, win.d)
        }
        beforeUnMounted()
      }
      app1(fakeWindow)
      console.log('主应用现在的1Window:', a, c, d)
      app1(fakeWindow)
      console.log('主应用现在的2Window:', a, c, d)
    </script>
  </body>
</html>
